<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="visible">
      <el-form :model="inputForm" size="small" ref="inputForm" v-loading="loading"
               :class="method==='view'?'readonly':''" :disabled="method==='view'"
               label-width="120px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="就诊记录" prop="visitId"
                          :rules="[
                                                        {required: true, message: '就诊记录不能为空', trigger: 'blur'}

                 ]">
              <el-select v-model="inputForm.visitId" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in visitList"
                  :key="item.id"
                  :label="item.visitRecord"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="病人姓名" prop="patientId"
                          :rules="[
                                                                                  {required: true, message: '病人姓名不能为空', trigger: 'blur'}

                 ]">
              <patient-select :limit='1' :value="inputForm.patientId"
                              @getValue='(value) => {inputForm.patientId=value}'></patient-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="医生姓名" prop="doctorId"
                          :rules="[
          {required: true, message: '医生姓名不能为空', trigger: 'blur'}

                 ]">
              <doctor-select :limit='1' :value="inputForm.doctorId"
                             @getValue='(value) => {inputForm.doctorId=value}'></doctor-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="药品名称" prop="medicationName"
                          :rules="[
                                      {required: true, message: '药品名称不能为空', trigger: 'blur'}

                 ]">
              <el-select v-model="inputForm.medicationName" placeholder="请选择" style="width: 100%;" @change="selectDrug">
                <el-option
                  v-for="item in drugList"
                  :key="item.id"
                  :disabled="guominList.includes(item.drugName)"
                  :label="item.drugName"
                  :value="item.id">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="剂量" prop="dosage"
                          :rules="[
                            {required: true, message: '剂量不能为空', trigger: 'blur'}
                 ]">
              <el-input v-model="inputForm.dosage" placeholder="请填写剂量" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="吃药频率" prop="frequency"
                          :rules="[
                            {required: true, message: '吃药频率不能为空', trigger: 'blur'}
                 ]">
              <el-input v-model="inputForm.frequency" placeholder="请填写吃药频率"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开药数量" prop="duration"
                          :rules="[
                            {required: true, message: '开药数量不能为空', trigger: 'blur'}
                 ]">
              <el-input-number v-model="inputForm.duration" placeholder="请填写开药数量"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="method === 'add'">
            <el-form-item label="回访时间" prop="followUpTime"
                         >
              <el-select v-model="inputForm.followUpTime" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in followUpTimeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="method === 'add'">
            <el-form-item label="满意度调查时间" prop="followUpTime"
            >
              <el-date-picker
                style="width: 100%;"
                v-model="inputForm.manyiduTime"
                :picker-options="pickerOptions"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <div v-if="guomin !== null && guomin.length > 0" style="margin-left: 40px;margin-top: 20px;color: red">
            *请注意，该患者对药物 {{ guomin }} 具有过敏史。
          </div>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">关闭</el-button>
      <el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import doctorSelect from '@/components/doctorSelect'
  import patientSelect from '@/components/patientSelect'
  import medicationInfoService from '@/api/medication/medicationInfoService'
  import visitInfoService from '@/api/visit/visitInfoService'
  import drugInfoService from '@/api/drug/drugInfoService'
  import patientInfoService from '@/api/patient/patientInfoService'

export default {
    data () {
      return {
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        followUpTimeList: [
          {
            label: '1周后',
            value: '1'
          },
          {
            label: '2周后',
            value: '2'
          }
        ],
        guomin: '',
        guominList: [],
        userInfo: {},
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          id: '',
          visitId: '',
          patientId: '',
          doctorId: '',
          medicationName: '',
          dosage: '',
          frequency: '',
          duration: '',
          followUpTime: '1',
          manyiduTime: ''
        },
        drugSearchForm: {
          drugName: ''
        },
        visitSearchForm: {
          patientId: '',
          doctorId: ''
        },
        visitList: [],
        drugList: []
      }
    },
    components: {
      doctorSelect,
      patientSelect
    },
    props: {
      patientId: {
        type: String,
        default: ''
      },
      doctorId: {
        type: String,
        default: ''
      }
    },
    watch: {
      'inputForm.patientId' (newVal) {
        if (newVal && newVal !== undefined && newVal !== null) {
          patientInfoService.queryById(newVal).then(({data}) => {
            console.log('ddd', data)
            console.log(data)
            if (data && data.id !== '') {
              this.userInfo = data
              console.log(data)
              this.guomin = data.guomin
              this.guominList = data.guomin.split(',')
            }
          })
        }
      }
    },
    methods: {
      init (method, id) {
        this.listDrug()
        this.listVisit()
        this.method = method
        this.inputForm.id = id
        if (method === 'add') {
          this.title = `新建处方信息`
        } else if (method === 'edit') {
          this.title = '修改处方信息'
        } else if (method === 'view') {
          this.title = '查看处方信息'
        } else if (method === 'addMedication') {
          this.title = '添加用药'
          this.inputForm.doctorId = this.doctorId
          this.inputForm.patientId = this.patientId
          this.inputForm.visitId = id
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            medicationInfoService.queryById(this.inputForm.id).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data)
              this.loading = false
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            medicationInfoService.save(this.inputForm).then(({data}) => {
              this.visible = false
              this.$message.success(data)
              this.$emit('refreshDataList')
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      listDrug () {
        drugInfoService.listAll(this.drugSearchForm).then(res => {
          this.drugList = res.data
        })
      },
      listVisit () {
        visitInfoService.listAll(this.visitSearchForm).then(res => {
          this.visitList = res.data
        })
      },
      selectDrug (value) {
        let frug = this.drugList.find(item => item.id === value)
        this.inputForm.frequency = frug.oralFrequency
        this.inputForm.dosage = frug.oralDose
      }
    }
  }
</script>


